<template>
  <div class="qr-encode-box">
    <qr-box ref="qmpCodeBox" boxName="在QMP使用" :qrContent="qmpCode" :printStyle="printSetting[0].printStyle"
      :qrStyle="qrCodeStyle[0]" :qrWidth='qrWidth' :qrHeight='qrHeight' :hint="printSetting[0].hint"
      :isPrintHint="printSetting[0].isPrintHint" :btnSize="btnSize" class="code-box" />
    <qr-box ref="otherCodeBox" boxName="在其他工具使用" :qrContent="otherCode" :printStyle="printSetting[1].printStyle"
      :qrStyle="qrCodeStyle[1]" :qrWidth='qrWidth' :qrHeight='qrHeight' :hint="printSetting[1].hint"
      :isPrintHint="printSetting[1].isPrintHint" :btnSize="btnSize" class="code-box" />
  </div>
</template>

<script>
  import {
    encrypt
  } from './api/qrcode.js'
  import QRBox from './components/QRBox.vue'
  export default {
    name: "QREncode",
    components: {
      'qr-box': QRBox
    },
    props: {
      sign: { //qrCode签名
        type: String,
        default: undefined,
        required: true
      },
      content: { //qrCode内容
        type: String,
        default: undefined,
        required: true
      },
      url: { //qrCode内容加密接口基础地址
        type: String,
        default: 'http://qy-code-admin.itdev2.quanyou.com.cn/app/v1/qrcode/decrypt?text='
      },
      qrWidth: {
        type: Number,
        default: 120
      },
      qrHeight: {
        type: Number,
        default: 120
      },
      baseUrl: {
        type: String,
        default: "/qy-code-admin"
      },
      btnSize: {
        type: String,
        default: 'mini'
      },
      isCreateNow: {
        type: Boolean,
        default: true
      },
      qrCodeStyle: { //qrCode样式
        type: Array,
        default: function () {
          return [{
            colorDark: "#333333"
          }, {
            colorDark: "#333333"
          }]
        }
      },
      printSetting: { //打印设置
        type: Array,
        default: function () {
          return [{
            hint: `QY/${this.sign}/${this.content}`,
            printStyle: undefined,
            isPrintHint: undefined
          }, {
            hint: `QY/${this.sign}/${this.content}`,
            printStyle: undefined,
            isPrintHint: undefined //是否打印提示内容
          }]
        }
      }
    },
    data() {
      return {
        qmpCode: null,
        otherCode: null
      }
    },
    computed: {
      dateRange() {
        const {
          sign,
          content,
          url
        } = this;
        return {
          sign,
          content,
          url
        }
      }
    },
    watch: {
      dateRange() {
        this.getQRcontent()
      }
    },
    mounted: function () {
      this.$nextTick(function () {
        if (this.isCreateNow) {
          this.getQRcontent()
        }
      })
    },
    methods: {
      getQRcontent() {
        if (this.sign && this.content) {
          var originalConent = `QY/${this.sign}/${this.content}`
          this.printSetting[0].hint = originalConent
          this.printSetting[1].hint = this.url + originalConent
          encrypt({
              text: originalConent
            }, this.baseUrl).then(res => {
              if (res.msg) {
                this.qmpCode = decodeURI(res.msg)
                this.otherCode = this.url + res.msg
              } else {
                this.$message.error("加密结果为空");
              }
            })
            .catch((e) => {
              console.log(e)
              this.$message.error(e);
            })
        } else {
          this.$message.error("参数为空");
        }
      }
    }
  }

</script>
<style lang="scss" scoped>
  .qr-encode-box {
    width: 100%;
    height: auto;

    .code-box {
      text-align: center;
      width: 50%;
      height: 100%;
      float: left;
    }
  }

</style>>
